import React from 'react'
import { connect } from 'react-redux'
import { CSSTransition } from 'react-transition-group'
import {
  HeaderWrapper,
  Logo,
  Nav,
  NavItem,
  SearchWrapper,
  SearchInp,
  SearchInfo,
  SearchInfoTitle,
  SearchInfoSwitch,
  SearchInfoList,
  SearchInfoItem,
  Addtion,
  Button
} from './style'

import { actionCreators } from './store'

class Header extends React.Component {
  searchArea = () => {
    const { list, page, totalPage, handleMouseEnter, handleMouseLeave, handleChangePage } = this.props
    const newList = list.toJS()
    const pageList = []
    if (newList.length) {
      for (let i = (page - 1) * 4; i < page * 4; ++i) {
        pageList.push(
          <SearchInfoItem key={ i }>{ newList[i] }</SearchInfoItem>
        )
      }
    }
    return (
      <SearchInfo onMouseEnter={ handleMouseEnter } onMouseLeave={ handleMouseLeave } >
        <SearchInfoTitle>
          热门搜索
          <SearchInfoSwitch onClick={ () => handleChangePage(page, totalPage) }>换一换</SearchInfoSwitch>
        </SearchInfoTitle>
        <SearchInfoList>
          { pageList }
        </SearchInfoList>
      </SearchInfo>
    )
  }

  render () {
    const { list, focused, mouseIn, handleInputFocus, handleInputBlur } = this.props
    return (
      <HeaderWrapper>
        <Logo />
        <Nav>
          <NavItem className='left active'>首页</NavItem>
          <NavItem className='left'>下载 App</NavItem>
          <SearchWrapper>
            <CSSTransition
              in={ focused }
              timeout={ 200 }
              classNames="slide"
            >
              <SearchInp
                onFocus={ () => handleInputFocus(list) }
                className={ focused ? 'focused' : '' }
                onBlur={ handleInputBlur }/>
            </CSSTransition>
            { (focused || mouseIn) && this.searchArea() }
          </SearchWrapper>
        </Nav>
        <Addtion>
          <Button className='writting'>写文章</Button>
          <Button className='reg'>注册</Button>
        </Addtion>
      </HeaderWrapper>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    // focused: state.get('header').get('focused')
    focused: state.getIn(['header', 'focused']),
    mouseIn: state.getIn(['header', 'mouseIn']),
    list: state.getIn(['header', 'list']),
    page: state.getIn(['header', 'page']),
    totalPage: state.getIn(['header', 'totalPage'])
  }
} 

const mapDispatchToProps = (dispatch) => {
  return {
    handleInputFocus (list) {
      dispatch(actionCreators.searchFocus());
      (0 === list.size) && dispatch(actionCreators.getSearchList())
    },

    handleInputBlur () {
      dispatch(actionCreators.searchBlur())
    },

    handleMouseEnter () {
      dispatch(actionCreators.mouseEnter())
    },

    handleMouseLeave () {
      dispatch(actionCreators.mouseLeave())
    },

    handleChangePage (page, totalPage) {
      var newPage = page < totalPage
                         ? page + 1 : 1
      dispatch(actionCreators.changePage(newPage))
    }
  }
} 

export default connect(mapStateToProps, mapDispatchToProps)(Header)
